<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字游戏（1-100）</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }
        #result {
            margin-top: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>猜数字游戏（1-100）</h1>
    <input type="number" id="guessInput" placeholder="输入数字" min="1" max="100">
    <button onclick="checkGuess()">提交</button>
    <div id="result"></div>

    <script>
        // 生成1到100之间的随机数
        const targetNumber = Math.floor(Math.random() * 100) + 1;

        function checkGuess() {
            const guess = parseInt(document.getElementById('guessInput').value);
            const resultDiv = document.getElementById('result');

            if (isNaN(guess) || guess < 1 || guess > 100) {
                resultDiv.textContent = "请输入1到100之间的有效数字！";
                return;
            }

            if (guess < targetNumber) {
                resultDiv.textContent = "太小了！再试一次。";
            } else if (guess > targetNumber) {
                resultDiv.textContent = "太大了！再试一次。";
            } else {
                resultDiv.textContent = "恭喜你！猜中了！";
            }
        }
    </script>
</body>
</html>